<page-progress>
  <page>
    <yield to="title">Progress</yield>
    <yield to="content">
      <h1 class="title">Progress bars</h1>
      <h2 class="subtitle">
        Native HTML <strong>progress</strong> bars
      </h2>
      <hr>
      <h3 class="title">Component</h3>
      <div class="example">
        <progress-bar current="{ 15 }" max="{ 100 }" readonly="{ true }"></progress-bar>
        <progress-bar classes="{ 'is-primary' }" current="{ 30 }" readonly="{ true }"></progress-bar>
        <progress-bar classes="{ 'is-danger' }" current="{ 30 }" readonly="{ true }"></progress-bar>
        <progress-bar classes="{ 'is-info' }" current="{ parent.val }" max="{ 200 }" title="{ '保存数量 (个)' }" step="{ 20 }" change="{ parent.update1 }"></progress-bar>
        <progress-bar classes="{ 'is-danger is-medium' }" current="{ parent.val2 }" title="{ '剩余时间 (天)' }" step="{ 1 }" change="{ parent.update2 }"></progress-bar>
        <progress-bar classes="{ 'is-primary is-small' }" current="{ parent.val3 }" title="{ '进度 (%)' }" step="{ 0.1 }" change="{ parent.update3 }"></progress-bar>
      </div>
      <hr>
      <h3 class="title">Example</h3>
      <div class="example">
        <progress class="progress" value="15" max="100">15%</progress>
        <progress class="progress is-primary" value="30" max="100">30%</progress>
        <progress class="progress is-info" value="45" max="100">45%</progress>
        <progress class="progress is-success" value="60" max="100">60%</progress>
        <progress class="progress is-warning" value="75" max="100">75%</progress>
        <progress class="progress is-danger" value="90" max="100">90%</progress>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress"</span> <span class="na">value=</span><span class="s">"15"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>15%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-primary"</span> <span class="na">value=</span><span class="s">"30"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>30%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-info"</span> <span class="na">value=</span><span class="s">"45"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-success"</span> <span class="na">value=</span><span class="s">"60"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>60%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-warning"</span> <span class="na">value=</span><span class="s">"75"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>75%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-danger"</span> <span class="na">value=</span><span class="s">"90"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/progress&gt;</span></code></pre>
        <button
          class="copy">Copy</button>
      </figure>
      <hr>
      <h3 class="title">Sizes</h3>
      <div class="example">
        <progress class="progress is-small" value="15" max="100">15%</progress>
        <progress class="progress" value="30" max="100">30%</progress>
        <progress class="progress is-medium" value="45" max="100">45%</progress>
        <progress class="progress is-large" value="60" max="100">60%</progress>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-small"</span> <span class="na">value=</span><span class="s">"15"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>15%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress"</span> <span class="na">value=</span><span class="s">"30"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>30%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-medium"</span> <span class="na">value=</span><span class="s">"45"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/progress&gt;</span>
<span class="nt">&lt;progress</span> <span class="na">class=</span><span class="s">"progress is-large"</span> <span class="na">value=</span><span class="s">"60"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>60%<span class="nt">&lt;/progress&gt;</span></code></pre>
        <button
          class="copy">Copy</button>
      </figure>
    </yield>
  </page>
  <script>
      import '../components/page/page.html'
      import '../components/progress-bar.html'
      
      this.val = 80
      this.val2 = 17
      this.val3 = 33.3
      this.update1 = (val)=> {
        this.val = val
        this.update()
      }
      this.update2 = (val) => {
        this.val2 = val
        this.update()
      }
      this.update3 = (val)=>{
        this.val3 = val
        this.update()
      }
  </script>
</page-progress>